<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #ball{
            width:20px;
            height:20px;
            border-radius:10px;
            background-color:#f90;
            border:1px solid #eee;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="ball" style=""></div>
</body>
<script>
    var ball = document.getElementById("ball");

    var num= 0 ;

    

    ball.onmousedown = function(env)
    {
        document.onmousemove = function(en){
            
            ball.style.left = (en.x-env.offsetX)+"px";

            ball.style.top = (en.y-env.offsetY)+"px";
        }
    }

    document.onmouseup = function(en)
    {
        document.onmousemove = function(){};

        // var t = setInterval(redan,50);
        // 
        upPoint = en.y;

        high = window.innerHeight - upPoint;

        console.log(upPoint,high);

        redan();

    }

    function redan(){

        if(high<=1)
        {
            return;
        }
        else{
            if(num%2==0)
            {
                ball.style.top = (parseInt(ball.style.top)+10)+"px";

                if(parseInt(ball.style.top)>=(window.innerHeight-20))
                {
                    num++;

                    high = Math.floor(high/2);
                }
            }
            else
            {
                ball.style.top = (parseInt(ball.style.top)-10)+"px";

                console.log(parseInt(ball.style.top),upPoint+high);

                if(parseInt(ball.style.top)<=(upPoint+high))
                {
                    num++;

                    upPoint = upPoint+high;
                }
            }

            setTimeout(redan,30);
        }
        

        
    }
</script>
</html>